<template>
    <div>
        <a-modal
                destroyOnClose
                :visible="this.modelVisible"
                :confirmLoading="this.loading"
                :maskClosable="false"
                :title="this.title"
                @cancel="handleCancel"
                @ok="handleOk"
        >
            <a-form :form="form">
                <a-form-item
                        label="名称"
                        :label-col="{span:6}"
                        :wrapper-col="{span:14}"
                >
                    <a-input
                            allowClear
                            v-decorator="['name', {
                                initialValue: this.editData && this.editData.name,
                                rules: [{ required: true, message: '请输入名称！' }]
                            }]"
                    />
                </a-form-item>

                <a-form-item
                        label="标签"
                        :label-col="{span:6}"
                        :wrapper-col="{span:14}"
                >
                    <a-input
                            v-decorator="['tag',{
                                initialValue: this.editData && this.editData.tag,
                            }]"
                            allowClear
                    />
                </a-form-item>

                <a-form-item
                        label="描述"
                        :label-col="{span:6}"
                        :wrapper-col="{span:14}"
                >
                    <a-textarea
                            v-decorator="['description',{
                                initialValue: this.editData && this.editData.description,
                            }]"
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                    />
                </a-form-item>
            </a-form>

        </a-modal>
    </div>
</template>

<script>
  import {mapActions, mapMutations, mapState} from 'vuex'

  export default {
    name: "RoleModel",
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    computed: {
      ...mapState('role', ['title', 'modelVisible', 'loading', 'editData'])
    },
    methods: {
      ...mapActions('role', ['add', "update"]),
      ...mapMutations('role', ['setState']),
      handleCancel() {
        this.setState({name: 'modelVisible', value: false})
        this.setState({name: 'editData', value: null})
      },
      handleOk() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setState({name: 'loading', value: true})
            if (this.title == '添加') {
              this.add(values)
            } else {
              values = {...values, objectId: this.editData.objectId}
              this.update(values)
            }
            this.setState({name: 'modelVisible', value: false})
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>